<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入关键字"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i-ep-search />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <el-table v-loading="loading" :data="tableList" highlight-current-row border>
        <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <el-table-column key="name" label="企业名称" align="center" prop="name" width="260" />
        <el-table-column key="code" label="企业信用代码" align="center" prop="code" width="260" />
        <el-table-column key="areaName" label="归属区域" width="160" align="center" prop="areaName" />
        <el-table-column key="regAddr" label="注册地址" align="center" width="160" prop="regAddr"> </el-table-column>
        <el-table-column key="officeAddr" label="办公地址" align="center" width="160" prop="officeAddr">
        </el-table-column>
        <el-table-column key="legalman" label="法人姓名" width="160" align="center" prop="legalman"> </el-table-column>
        <el-table-column key="legalCardno" label="法人身份证号码" width="200" align="center" prop="legalCardno" />
        <el-table-column key="legalMobile" label="法人手机号码" width="200" align="center" prop="legalMobile" />
        <el-table-column key="regCapital" label="注册资本（万元）" width="200" align="center" prop="regCapital" />
        <el-table-column key="checkStatusName" label="审核状态" width="200" align="center" prop="checkStatusName" />
        <el-table-column key="dataSourceName" label="数据来源" width="200" align="center" prop="dataSourceName" />
        <el-table-column label="操作" fixed="right" :max-width="260" :min-width="mobile === 'mobile' ? 90 : 200">
          <template #default="scope">
            <el-button
              v-hasPerm="['corp:corpinfo:edit']"
              type="primary"
              link
              size="small"
              @click="handelEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              v-if="scope.row.checkStatus === 0"
              v-hasPerm="['corp:corpinfo:audit']"
              link
              type="primary"
              size="small"
              @click="handelAudit(scope.row)"
            >
              审核
            </el-button>
            <el-button
              v-hasPerm="['corp:corpinfo:delete']"
              type="primary"
              link
              size="small"
              @click="handelDelete(scope.row)"
            >
              删除
            </el-button>
            <el-button
              v-hasPerm="['corp:corpinfo:resetpassword']"
              type="primary"
              link
              size="small"
              @click="handelResetPassword(scope.row)"
            >
              重置密码
            </el-button>

            <el-button type="primary" link size="small" @click="openDialog(scope.row.corpId)"> 详情 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
    <edit-form v-if="dialogEdit.visible" :dialog-info="dialogEdit" @send-close="sendClose"></edit-form>
    <!--	详情 	-->
    <detail
      v-if="dialogCorps.visible"
      :dialog-corps="dialogCorps"
      class="system"
      :style="{ '--mobileAddFormHeight': mobile === 'mobile' ? screenHeight - 117 + 'px' : 'auto' }"
      @send-close="sendClose"
    ></detail>
    <audit-form v-if="dialogAudit.visible" :dialog-audit="dialogAudit" @send-close="sendClose"></audit-form>
  </div>
</template>

<script lang="ts">
export default {
  name: "Corps",
};
</script>

<script lang="ts" setup>
import PasswordInput from "@/components/PasswordInput/index.vue";
import { corpsListForm, ParamsType } from "@/api/system/corps/types";
import { getCorpsList, ResetPassword, deleteCorp } from "@/api/system/corps/index";
import detail from "./detail.vue";
import editForm from "./editForm.vue";
import auditForm from "./auditForm.vue";
import { useScreen } from "@/store/modules/screen";
import { ElFormItem } from "element-plus";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenHeight = computed(() => screenStore.screenHeight);

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const tableList = ref<corpsListForm[]>();
const queryParams = reactive<ParamsType>({
  pageNum: 1,
  pageSize: 20,
});

const dialogCorps = reactive<DialogOption>({
  visible: false,
  title: "企业详情",
  footBtn: "",
});

const dialogEdit = reactive<DialogOption>({
  visible: false,
  title: "编辑企业",
  footBtn: "",
});
const dialogAudit = reactive<DialogOption>({
  visible: false,
  title: "审核企业",
  footBtn: "",
});

/* 列表查询 */
const handleQuery = async () => {
  loading.value = true;
  let list = await getCorpsList(queryParams);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data.list;
      queryParams.pageNum = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
      total.value = list.data.total;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
  loading.value = false;
};

/**
 * 重置查询
 */
const resetQuery = () => {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  queryParams.pageSize = 20;
  handleQuery();
};

/* 详情 */
const openDialog = (id: any) => {
  dialogCorps.title = "企业详情";
  dialogCorps.footBtn = "";
  dialogCorps.id = id;
  dialogCorps.visible = true;
};

/* 编辑 */
const handelEdit = (row: any) => {
  dialogEdit.title = "编辑企业";
  dialogEdit.footBtn = "确认修改";
  dialogEdit.id = row.corpId;
  dialogEdit.visible = true;
};
const handelAudit = (row: any) => {
  dialogAudit.title = "审核企业";
  dialogAudit.footBtn = "确认提交";
  dialogAudit.id = row.corpId;
  dialogAudit.visible = true;
};
/* 删除 */
const handelDelete = (row: any) => {
  ElMessageBox.confirm("确定删除该企业吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteCorp(row.corpId).then((res) => {
        if (res.type === 0) {
          if (res.success) {
            ElMessage.success("删除成功");
            handleQuery();
          } else {
          }
        } else {
        }
      });
    })
    .catch(() => {});
};
const passwordForm = ref({
  password: "",
});
const validatePassword = ref<boolean>(false);
/* 重置密码 */
const handelResetPassword = (row: any) => {
  ElMessageBox({
    title: "确定重置该企业密码吗？",
    message: () =>
      h("div", [
        h(
          ElForm,
          {
            model: passwordForm,
            labelWidth: "80px",
          },
          [
            h(
              ElFormItem,
              {
                rules: [
                  {
                    required: true,
                    message: "请输入密码",
                  },
                ],
                label: "密码",
                prop: "password",
              },
              [
                h(PasswordInput, {
                  onInputChange: (value: string, allow: boolean) => {
                    passwordForm.value.password = value;
                    validatePassword.value = allow;
                  },
                }),
              ]
            ),
          ]
        ),
      ]),
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    showCancelButton: true,
    beforeClose(action, instance, done) {
      if (action === "confirm") {
        if (!validatePassword.value) return;
        instance.confirmButtonLoading = true;
        instance.confirmButtonText = "执行中...";
        ResetPassword(row.corpId, passwordForm.value.password)
          .then((res) => {
            if (res.success) {
              ElMessage({
                type: "success",
                message: res.msg,
              });
              instance.confirmButtonLoading = false;
              instance.confirmButtonText = "确定";
              done();
            } else {
              ElMessage({
                type: "error",
                message: res.msg,
              });
            }
          })
          .finally(() => {
            loading.value = false;
          });
      } else {
        done();
      }
    },
  });
};

const sendClose = (query: boolean) => {
  dialogCorps.visible = false;
  dialogEdit.visible = false;
  dialogAudit.visible = false;
  if (query) {
    handleQuery();
  }
};

onMounted(() => {
  handleQuery();
});
</script>

<style lang="less" scoped></style>
